<template>
  <view>
    <view class="disFlxJS custom-comp" @click="openPopup">
      <FormAreaPicker
        v-if="addressCodes.length"
        :model-value="addressCodes"
        :show-area="false"
        placeholder="不限地区"
        :border="false"
        :disabled="true"
      />
      <text v-else>不限地区</text>
      <text v-if="!addressCodes.length" class="ant-iconfont fz-12 ml-5">&#xe77e;</text>
    </view>
    <UniPopup
      ref="coopPeriodPopup"
      type="bottom"
      borderRadius="32rpx 32rpx 0 0"
      backgroundColor="#FFF"
      :isMaskClick="false"
      :z-index="999"
      @maskClick="handleMaskClick"
    >
      <view class="popup-content">
        <view class="px-16 pb-8">
          <view class="fz-16 py-12">
            <text>选择可合作地区</text>
          </view>
        </view>
        <view class="redio-list">
          <view class="pl-24 pr-16 py-12 disFlxJS" @click="handleItemClick('noLimit')">
            <view class="flex-1 ov-1">
              <text>不限地区</text>
            </view>
            <view>
              <text v-if="type === 'noLimit'" class="ali-icon fz-20" style="color: #2878ff">
                &#xe693;
              </text>
              <text v-else class="ali-icon fz-20" style="color: #969799">&#xe690;</text>
            </view>
          </view>
          <view>
            <view class="pl-24 pr-16 py-12 disFlxJS" @click="handleItemClick('limit')">
              <view class="flex-1 ov-1">
                <text>限制合作地区</text>
              </view>
              <view>
                <text v-if="type === 'limit'" class="ali-icon fz-20" style="color: #2878ff">
                  &#xe693;
                </text>
                <text v-else class="ali-icon fz-20" style="color: #969799">&#xe690;</text>
              </view>
            </view>
            <view class="pl-32 pr-10">
              <UniFormsItem
                v-if="type === 'limit'"
                label="选择地区"
                required
                labelWidth="100"
                :errorMessage="errorMessage"
              >
                <FormAreaPicker
                  v-model="updAddressCodes"
                  :show-area="false"
                  placeholder="请选择合作地区"
                  :border="false"
                />
              </UniFormsItem>
            </view>
          </view>
        </view>
        <view class="px-16 pt-10">
          <TButton text="确定" type="primary" @click="handleSubmit" />
        </view>
      </view>
    </UniPopup>
  </view>
</template>
<script setup lang="ts">
  import { getCurrentInstance, reactive, ref, watch, type PropType } from 'vue';
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import FormAreaPicker from '@/components/Form/components/FormAreaPicker.vue';
  import UniFormsItem from '@/components/Form/uni_modules/uni-forms-item/uni-forms-item.vue';
  const _this = getCurrentInstance();

  const props = defineProps({
    addressCodes: {
      type: Array as () => Array<number>,
      default: [],
    },
  });

  const emits = defineEmits(['update:addressCodes']);

  const updAddressCodes = ref<number[]>([]);

  const type = ref<'limit' | 'noLimit'>('limit');

  const handleItemClick = (t: 'limit' | 'noLimit') => {
    type.value = t;
    if (t === 'noLimit') {
      updAddressCodes.value = [];
    }
  };

  watch(
    () => props.addressCodes,
    (val) => {
      updAddressCodes.value = val;
    },
    { deep: true },
  );

  const openPopup = () => {
    if (props.addressCodes.length) {
      type.value = 'limit';
    } else {
      type.value = 'noLimit';
    }
    (_this?.refs['coopPeriodPopup'] as any).open();
  };

  function handleClose() {
    (_this?.refs['coopPeriodPopup'] as any).close();
  }

  const errorMessage = ref('');
  const handleSubmit = () => {
    if (type.value === 'limit' && !updAddressCodes.value.length) {
      errorMessage.value = '请选择合作地区';
      return;
    }
    errorMessage.value = '';
    emits('update:addressCodes', updAddressCodes.value);
    handleClose();
  };
  const handleMaskClick = () => {
    handleClose();
  };
</script>
<style lang="scss" scoped>
  .custom-comp {
    min-height: 72rpx;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    color: #999996;
  }
  ::v-deep .is-disabled {
    background-color: white !important;
  }
</style>
